<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" type="image/png" th:href="@{../images/fav.png}">
    <link rel="stylesheet" th:href="@{../layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{../layui/css/layui.mobile.css}">
    <script th:src="@{../js/jquery-3.2.1.min.js}"></script>

    <title>我要询诊</title>
</head>
<body background="">
<fieldset align="center" class="layui-elem-field layui-field-title" style="margin-top: 20px;color: #FF3333; font-size: large">
    <legend>询诊 留 言</legend>
</fieldset>
<form name="guestbook" id="guestbook" class="layui-form" align="center"style="margin-top: 45px">
    <input id="updateid" name="updateid" th:value="${userid}" type="hidden"/>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">您的姓名<span style="color: #FF3333; ">*</span></label>
            <div class="layui-input-inline">
                <input name="username" id="username" class="layui-input" style="width: 160px" size="15" maxlength="10"
                       onMouseOver="this.style.backgroundColor = '#E5F0FF'"
                       onMouseOut="this.style.backgroundColor = ''">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">
                <span>患者性别*</span>
            </label>
            <div class="layui-input-inline">
                <input name="sex" type="radio" checked value="男">男
                <input name="sex" type="radio" value="女">女
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label" style="color: #FF0000; ">患者年龄*</label>
            <div class="layui-input-inline">
                <input name="age" class="layui-input" id="age"
                       onMouseOver="this.style.backgroundColor = '#E5F0FF'" onMouseOut="this.style.backgroundColor = ''"
                       maxlength="10">
                <span style="color: #FF0000; ">（请写明患者的年龄）</span>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-inline">
                <input name="address" class="layui-input" style="width: 320px" id="email" size="35" maxlength="50"
                       onMouseOver="this.style.backgroundColor = '#E5F0FF'"
                       onMouseOut="this.style.backgroundColor = ''">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">询诊内容<span style="color: #FF3333; ">*</span>
            </label>
            <div class="layui-input-inline">
            <textarea name="content" id="content" rows="10" cols="50" style="resize:none;" title="询诊的内容，每条不能超过800字。"
                      onMouseOver="this.style.backgroundColor = '#E5F0FF'"
                      onMouseOut="this.style.backgroundColor = ''" placeholder="请输入内容"></textarea>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <input class="layui-btn" name="check" type="button" id="check" value='提 交'>
            <input class="layui-btn layui-btn-primary" type="reset" value="重 填">
            <input class="layui-btn layui-btn-primary" type="button" onclick="javascript:history.back()" value="返 回">
        </div>
    </div>
</form>

</body>
<script type="text/javascript">
    $("#check").click(function () {
        if (document.guestbook.username.value == '') {
            window.alert('请输入您的姓名!!');
            document.guestbook.username.focus();
            return false;

        }
        if (document.guestbook.age.value == '') {
            window.alert('请输入患者的年龄!!');
            document.guestbook.age.focus();
            return false;

        }
        if (document.guestbook.content.value == '') {
            window.alert('请输入需要咨询的内容!!');
            document.guestbook.content.focus();
            return false;
        }
        if (document.guestbook.address.value=='' ) {
            window.alert('请输入地址!!');
            document.guestbook.address.focus();
            return false;
        }
        if (document.guestbook.content.value.length > 800) {
            window.alert("留言反馈内容不能超过800字!！");
            document.guestbook.content.focus();
            return false;
        }
        var json = {
            "userid": document.guestbook.updateid.value,
            "patient":{
                "name": document.guestbook.username.value,
                "sex": document.guestbook.sex.value,
                "age": document.guestbook.age.value,
                "address": document.guestbook.email.value,
            },
            "consultation": {
                "content": document.guestbook.content.value
            }
        };
        console.log(json);
        $.ajax({
            url: "/consultation",
            type: "POST",
            dataType: 'json',
            data: JSON.stringify(json),//转字符串
            contentType: "application/json;charsetset=UTF-8",
//必须加@RequestBody后端@RequestBody注解对应的类在将HTTP的输入流(含请求体)装配到目标类(即:@RequestBody后面的类)时，
// 会根据json字符串中的key来匹配对应实体类的属性，如果匹配一致且json中的该key对应的值
            //符合(或可转换为)实体类的对应属性的类型要求时，会调用实体类的setter方法将值赋给该属性
            success: function (result) {
                console.log(result);
                if (result.code == 200) {
                    alert("添加成功");
                    window.location.href = "/index";
                } else {
                    alert(result.data.errors);
                }

            }
        });

    });

</script>
<script th:src="@{../layui/layui.all.js}" charset="utf-8">
    layer.open({
        success: function (layero, index) {
            form.render('radio');//开启单选框
        }
    });
</script>

</html>